<template>
	<page-meta :background-color="_temp_themeColor">
		<loading :show="loading_show"></loading>
		<refresh-view :loading="refresher_show" :height="naviHeight"></refresh-view>
		<view class="container" :style="{backgroundColor: _temp_themeColor}">
			<customHead
				:isShowBackArrow="true"  
				:refresher_enabled="true"
				title="爆款限时购"
				titlePaddingLeft="30"
				navi_background="#fff"
			>
			</customHead>
			<view class="content_box">
				<view class="title_img">
					<image :src="swiperList[0].activityImgUrl" mode="aspectFill"></image>
					<!-- <image :src="swiperList[1].activityImgUrl" mode="aspectFill"></image> -->
				</view>
				<view class="content">
					<view class="goods_item _fade" @click="gotoDetail(item.id)"  v-for="(item, index) in goodsList" :key="index">
						<image :src="item.rotationImgsJson[0]" mode="aspectFill"></image>
						<view class="goods_title">
							<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
						</view>
						<view class="desc">
							<text :style="{color: _temp_textColor}">{{item.goodsRemarks}}</text>
						</view>
						<view class="price">
							<view class="" v-if="currentFirm.id">
								<span>￥</span>
								<text>
									{{item.goodsPrice}}
								</text>
							</view>
							<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
							<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>		
		</view>
	</page-meta>
</template>

<script>
	import { searchPlugsHotGoodsList, getApplicationPlugsRecommendedList, searchHotGoodsList } from "@/tools/request/api.js"
	export default {
		data() {
			return {
				goodsList: [],
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				swiperList: [],
				refresher_show: false,
				loading_show: false
			};
		},
		onLoad () {
			this.getGoodsList();
			this.getSwiperList();
		},
		methods: {
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			goback () {
				uni.navigateBack();
			},
			gotoDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			getSwiperList() {
				let data = {
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				getApplicationPlugsRecommendedList(data).then(res => {
					if (res.code == 200) {
						let list = res.body;
						this.swiperList = list.filter(item => item.type == 'faddish');
					}
				})
			},
			// 根据分类id获取销量排行列表
			async getGoodsList (clear, id, page, size) {
				let data = {
					page: page? page: this.goodsPage.page,
					size: size? size: this.goodsPage.size,
					businessId: this.businessId,
					// categoryId: '-1'
				};
				this.loading_show = true;
				let res = await searchHotGoodsList(data);
				if (res.code != 200) return uni.$showMsg();
				this.goodsPage.totalPage = res.body.pages;
				this.goodsPage.hasNextPage = res.body.hasNextPage;
				let list = res.body.list;
				list.forEach((item) => {
					if (item.rotationImgsJson) {
						item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
					}
				})
				if (clear) {
					this.goodsList = list;
				} else {
					this.goodsList = this.goodsList.concat(list);
				}
				this.loading_show = false;
				this.refresher_show = false;
			},
			// 触底加载更多
			onReachBottom() {
				if (this.goodsPage.hasNextPage) {
					this.goodsPage.page++;
					this.getGoodsList();
				}
			},
			// 下拉刷新
			onPullDownRefresh () {
				this.refresher_show = true;
				this.goodsPage.page = 1;
				this.getGoodsList(true);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		display: flex;
		flex-direction: column;
		// background-color: #ff0000;
		
		.content_box{
			
			.title_img{
				width: 100%;
				display: flex;
				
				image{
					width: 100%;
					height: 300rpx;
				}
			}
			.content{
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 0 20rpx;
				padding-bottom: 40rpx;
				
				.goods_item{
					padding: 30rpx 15rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: center;
					flex: 0 0 45%;
					background-color: #fff;
					margin-top: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
					
					.goods_title{
						width: 100%;
						max-height: 3em;
						white-space: normal;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 50rpx;
						margin-top: 20rpx;
					}
					
					image{
						width: 320rpx;
						height: 320rpx;
						border-radius: 10rpx;
					}
					.desc{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 26rpx;
						color: #9a9a9a;
						margin-top: 20rpx;
					}
					.price{
						width: 100%;
						margin-top: 20rpx;
						font-size: 30rpx;
						color: #FF0000;
						font-weight: bold;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						span{
							font-size: 30rpx;
						}
						.image{
							width: 50rpx;
							height: 50rpx;
						}
						.desc_text{
							font-size: 26rpx;
							color: #aaaaaa;
						}
					}
				}
			}
		}
		
		
		
	}
	
</style>
